<template>
  <div class="input-number">
    <button class="fl" @click="onSubtract">-</button>
    <input type="text" :value="currentValue" readonly>
    <button class="fr" @click="onIncrease">+</button>
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        currentValue: this.value
      }
    },
    methods: {
      onSubtract() {
        if (this.currentValue === 0) return
        this.currentValue--
        this.$emit('input', this.currentValue)
      },
      onIncrease() {
        this.currentValue++
        this.$emit('input', this.currentValue)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .input-number {
    display: inline-block;
    width: 110px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    overflow: hidden;
    button {
      width: 30px;
      height: 28px;
      background: #f6f6f6;
      font-size: 16px;
      &.fl {
        border-right: 1px solid #ccc;
      }
      &.fr {
        border-left: 1px solid #ccc;
      }
    }
    input {
      width: 48px;
      height: 28px;
      text-align: center;
    }
  }
</style>